<template>
  <div class="container" style="width: 95%;margin: 0 auto">
    <site-nav/>
    <div class="top-bar" style="margin: 20px 0">
      <el-input v-model="form.coupon_id" placeholder="优惠券编号" style="width: 200px;margin-right: 20px"></el-input>
      <el-input v-model="form.batch" placeholder="发放批次" style="width: 200px;margin-right: 20px"></el-input>
      <el-input v-model="form.user_id" placeholder="用户id" style="width: 200px;margin-right: 20px"></el-input>
      <el-select v-model="form.coupon_type" placeholder="优惠券类型" style="margin-right: 20px"  clearable >
        <el-option
            v-for="v in coupon_types"
            :key="v.value"
            :label="v.label"
            :value="v.value">
        </el-option>
      </el-select>
      <el-input v-model="form.coupon_title" placeholder="优惠券关键字" style="width: 200px;margin-right: 20px"></el-input>
      <el-button>筛选</el-button>
    </div>
    <div class="table">
      <el-card class="box-card" >
        <el-table
            :data="tableData"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection">
          </el-table-column>
          <el-table-column
              prop="coupon_id"
              label="优惠券编号">
          </el-table-column>
          <el-table-column
              prop="user_id"
              label="用户id">
          </el-table-column>
          <el-table-column
              prop="batch"
              label="发放批次">
          </el-table-column>
          <el-table-column
              prop="coupon_title"
              label="优惠券名称">
          </el-table-column>
          <el-table-column
              prop="coupon_type"
              label="优惠券种类">
          </el-table-column>
          <el-table-column
              prop="date"
              label="优惠券有效期"
              sortable>
          </el-table-column>
          <el-table-column
              prop="status"
              label="有效期">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="btn-group">
      <el-button type="danger" style="margin: 20px 0">批量删除</el-button>
    </div>
    <div class="block" style="float: right;margin-right: 5%;margin-top: 25px">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import SiteNav from '@/components/SiteNav'

  export default {
    components: {SiteNav},
    data () {
      return {
        form: {
          coupon_id: '',
          user_id: '',
          coupon_type: '',
          coupon_title: '',
          batch: ''
        },
        coupon_types: [{
          value: '1',
          label: '免费优惠券'
        }, {
          value: '2',
          label: '定额优惠券'
        }, {
          value: '2',
          label: '商家优惠券'
        }],
        tableData: [{
          user_id: '1414202445',
          coupon_id: '11574652301',
          coupon_title: '3元洗车券(编号52)',
          coupon_type: '定额洗车券',
          date: '2018.05.05-2018.05.08',
          status: '有效',
          batch: '2'
        }, {
          user_id: '1414553890',
          coupon_id: '11574653782',
          coupon_title: '免费洗车券(编号52)',
          coupon_type: '免费洗车券',
          date: '2018.05.01-2018.05.02',
          status: '已失效',
          batch: '1'
        }, {
          user_id: '1414553890',
          coupon_id: '11574611124',
          coupon_title: '3元洗车券(编号52)',
          coupon_type: '定额洗车券',
          date: '2018.05.05-2018.05.08',
          status: '有效',
          batch: '2'
        }, {
          user_id: '2042042556',
          coupon_id: '11574645678',
          coupon_title: '3元洗车券(编号52)',
          coupon_type: '定额洗车券',
          date: '2018.05.05-2018.05.08',
          status: '有效',
          batch: '2'
        }],
        multipleSelection: []
      }
    },
    methods: {
      formatter (row, column) {
        return row.address
      },
      handleDelete (index, row) {
        console.log(index, row)
      },
      handleSelectionChange (val) {
        this.multipleSelection = val
        console.log(this.multipleSelection)
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .btn-group {
    position: absolute;
    left: 5%;
    display: inline-block;
    text-align: left;
  }
</style>
